<template>
	<view class="modificationPhoneBox">
		<view class="title">
			绑定手机，让你的账号更安全
		</view>
		<view class="bgcWhite padding">
			<view class="height me-fx-row-start-c">
				<view class="widthFont">
					+86
				</view>
				<input type="text" value=""placeholder="请输入手机号" v-model="phone" disabled='true'/>
			</view>
			<view class="height me-fx-row-start-c border">
				<view class="widthFont">
					验证码
				</view>
				<input type="text" value=""placeholder="请输入验证码" v-model="yzm"/>
				<text class="forgetPass" @click="sendYzm" v-if="yzmBtn">
					获取验证码
				</text>
				<text class="forgetPass" v-else>
					{{yzmConter}}s重新获取
				</text>
			</view>
			<view class="height me-fx-row-start-c border">
				<view class="widthFont">
					设置密码
				</view>
				<input type="text" value=""placeholder="请设置登录密码" v-model="pass" />
			</view>
		</view>
		
		<view class="sureBtn" @click="sureBtn">
			立即重置
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				yzm:'',
				pass:'',
				yzmBtn:true,
				yzmConter:'',
				yzmConter:'',
			}
		},
		created() {
			this.getPhone()
		},
		methods: {
			getPhone(){
				this.$u.get('/user/mobile').then(res => {
					if(res){
						this.phone=res.data.mobile
					}
				})
				.catch((res) => {
				})
			},
			sendYzm(){
				this.$u.get('/code/modify_pwd', {mobile:this.phone}).then(res => {
					if(res){
						uni.showToast({
							title: res.message,
							duration: 1000,
							icon: 'none'
						});
						this.yzmTime()
					}
				})
				.catch((res) => {
					console.log(res.message)
				})
			},
			
			yzmTime(){
				const TIME_COUNT = 60;
				    if (!this.timer) {
				      this.yzmConter = TIME_COUNT;
				      this.yzmBtn = false;
				      this.timer = setInterval(() => {
				      if (this.yzmConter > 0 && this.yzmConter <= TIME_COUNT) {
				        this.yzmConter--;
				       } else {
				        this.yzmBtn = true;
				        clearInterval(this.timer);
				        this.timer = null;
				       }
				      }, 1000)
				     }
			},
			sureBtn(){
				if(this.phone==''){
					uni.showToast({
						title: '请输入手机号码',
						duration: 1000,
						icon: 'none'
					})
					return
				}else if(this.yzm ==''){
					uni.showToast({
						title: '请输入验证码',
						duration: 1000,
						icon: 'none'
					})
					return
				}else if(this.pass == ''){
					uni.showToast({
						title: '请输入密码',
						duration: 1000,
						icon: 'none'
					})
					return
				}else{
					let data={
						password:this.pass,
						code:this.yzm
					}
					this.$u.put('/user/password/modify',data).then(res => {
						if(res){
							uni.showToast({
								title: '修改成功',
								duration: 1000,
								icon: 'none'
							});
							setTimeout(()=>{
								uni.navigateBack({
								    delta: 2
								});
							},1500)
						}else {
							uni.showToast({
								title: res.message,
								duration: 1000,
								icon: 'none'
							});
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
				}
			},
		}
	}
</script>

<style>
	.modificationPhoneBox{
		background-color: #F5F5F5;
	}
	.title{
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 36rpx;
		}
		.bgcWhite{
			background-color: white;
		}
		.height{
			height: 120rpx;
			line-height: 120rpx;
		}
		.widthFont{
			width: 200rpx;
			font-size: 30rpx;
			font-weight:bold;
			color:rgba(51,51,51,1);
		}
		.padding{
			padding:0 36rpx ;
		}
		.border{
			border-top: 1rpx solid  #F5F5F5
		}
		.sendYZM{
			width:154rpx;
			height:46rpx;
			background:rgba(255,255,255,1);
			border:1rpx solid rgba(92,20,255,1);
			border-radius:23rpx;
			text-align: center;
			line-height: 46rpx;
			font-size:26rpx;
			color:rgba(107,42,254,1);
		}
		.sureBtn{
			width:681rpx;
			height:88rpx;
			background:rgba(92,20,255,1);
			opacity:0.9;
			border-radius:44rpx;
			margin: 120rpx auto;
			text-align: center;
			line-height: 88rpx;
			font-size:36rpx;
			font-weight:bold;
			color:rgba(255,255,255,1);
		}
		.forgetPass{
			background:rgba(255,255,255,1);
			border:1rpx solid rgba(92,20,255,1);
			border-radius:23rpx;
			font-size:26rpx;
			color:rgba(107,42,254,1);
			height: 46rpx;
			line-height: 46rpx;
			padding:  0 10rpx;
		}
</style>
